<%--
  Created by IntelliJ IDEA.
  User: duanzx
  Date: 2021/2/22
  Time: 17:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>极光游戏（CLIPJOINT.COM）-全方位正版游戏服务平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">
    <link rel="shortcut icon" href="${ bp }/static/image/favicon.ico" />
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        * {margin: 0;padding: 0}
        a {cursor: pointer;text-decoration: none;}
        .top {width: 100%;height: 30px;padding-left: 60px;line-height: 30px;overflow: hidden;background-color:#2b2c31;}
        .show {color:rgba(255, 255, 255, 0.7) ;}
        .index {color:rgba(255, 255, 255, 0.7) ;}
        .primary {color: #ffffff;}
        .index:hover {color: #ffffff;}
        .community-content {padding: 110px 0 40px;width: 1200px;margin: 0 auto;position: relative;min-height: 100vh;}
        .community-content:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .community-content .tabs-container {min-height: 603px;margin-top: 30px;}
        .tabs-container .left-menu-tabs-buttons {float: left;width: 160px;height: auto;background: #282931;overflow: hidden;border-radius: 5px 5px 5px 5px;}
        .left-menu-tabs-buttons .first-title {font-size: 18px;color: #ffffff;margin: 0 20px 5px 20px;padding-bottom: 10px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
        .left-menu-tabs-buttons .tabs-button {padding: 0;float: none;border-top: none;height: 42px;}
        .tabs-buttons .tabs-button {line-height: 54px;border-width: 4px 0 0;border-style: solid;border-color: transparent;font-size: 16px;}
        .tabs-button a {font-size: 16px;color: rgba(255, 255, 255, 0.6);display: block;line-height: 42px;text-align: center;}
        .tabs-button .active {color: #ff6900;background: rgba(255, 255, 255, 0.05)!important;}
        .active {color: #ff6900;background: rgba(255, 255, 255, 0.05);}
        .user-center {margin: 0 0 0 180px;background:transparent }
        .user-center .basic-info {font-size: 12px;background-color: #282931;padding: 50px 110px 40px 10px}
        .dream-info {border-radius: 20px;border:0;color: #FFFFFF}
        .dream-info td {font-size: 15px;display: inline-block;height: 100px;line-height: 100px;text-align: center;margin: 0 60px 20px 0}
        .dream-info .game-name {width: 200px;overflow: hidden;font-size: 20px}
        .dream-info img {width:250px;height: 100px }
        .dream-info .game-keyword {width: 200px;font-size: 30px}
    </style>
</head>
<body>

<!-- 公共头部/首页 -->
<%@ include file="../common/index-header.jsp" %>

<div class="top">
    <span class="show">您的位置：</span>
    <a href="/" class="index">首页 》</a>
    <a href="" class="primary">个人中心</a>
</div>

<div class="community-content">
    <div class="tabs-container">
        <div class="tabs-buttons left-menu-tabs-buttons">
            <div class="tabs-button first-title">订单中心</div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=purchased" >我的订单</a>
            </div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=gamefactory" class="active">我的游戏</a>
            </div>
            <div class="tabs-button first-title">我的财产</div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=wallet" >我的钱包</a>
            </div>
            <div class="tabs-button first-title">我的账户</div>
            <div class="tabs-button">
                <a href="/setting/info.jsp"  >基本信息</a>
            </div>
            <div class="tabs-button">
                <a href="/setting/security.jsp " >账号安全</a>
            </div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=dream">愿望单</a>
            </div>
        </div>
        <div class="user-center">
            <div class="basic-info">
                <table class="dream-info">
                <c:if test="${ not empty purchasedList }">
                    <tr>
                        <td class="game-name">游戏名</td>
                        <td style="width: 250px">游戏图片</td>
                        <td class="game-keyword" >游戏激活码</td>
                    </tr>
                    <c:forEach items="${ purchasedList }" var="purchased" varStatus="vs">
                        <tr>
                            <td class="game-name">${ purchased.game_name}</td>
                            <td>
                                <img src="${ bp }${ purchased.game_image}">
                            </td>
                            <td class="game-keyword" >${ purchased.keyword }</td>
                        </tr>
                    </c:forEach>
                </c:if>
                </table>
            </div>
        </div>

    </div>
</div>

<!-- 公共底部 -->
<%@ include file="../common/footer.jsp" %>


<script src="${ bp }/static/js/jquery-3.5.1.js"></script>
<script type="text/javascript">

</script>
</body>
</html>
